<html><head>
        <meta charset="utf-8">
        <title>ccblog的个人空间</title>
    
        <style>
            body,
            html{
                margin: 0;
                padding: 0;
                border: 0;
                font-family: 'Nunito', sans-serif;
            }
    
            body{background:#FFFAF0;}
    
            canvas{
                margin: 0;
                padding: 0;
                display: block; /*  ˉ\_(ツ)_/ˉ  */
                touch-action: none;
            }
            h1{
                position: absolute;
                top: 50%;
                left: 0;
                margin: auto;
                width: 100%;
                text-align: center;
                color:#2F4F4F;
            }
        </style>
    
    </head>
    <body>
    
    <h1>
    ☆☆☆ ccblog ☆☆☆ QQ:21216695</h1>
    
    <canvas height="843" width="1303"></canvas>
    
    <script>
        var canvas = document.querySelector('canvas');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        c = canvas.getContext('2d');
    
        window.addEventListener('resize', function(){
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
    
            initCanvas();
        })
    
        var mouse = {
            x: undefined,
            y: undefined
        }
        window.addEventListener('mousemove',
            function (event) {
                mouse.x = event.x;
                mouse.y = event.y;
                drawCircles();
            }
        )
        window.addEventListener("touchmove",
            function (event) {
                let touch = event.touches[0];
                mouse.x = touch.clientX;
                mouse.y = touch.clientY;
                drawCircles();
            }
        )
    
        function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life){
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.minRadius = radius;
            this.vx = vx;
            this.vy = vy;
            this.birth = birth;
            this.life = life;
            this.opacity = opacity;
    
            this.draw = function() {
                c.beginPath();
                c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
                c.fillStyle = 'rgba(' + rgb +','+ this.opacity +')';
                c.fill();
            }
    
            this.update = function(){
                if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
                    this.vx = -this.vx;
                }
    
                if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
                    this.vy = -this.vy;
                }
    
                this.x += this.vx;
                this.y += this.vy;
    
                this.opacity = 1- (((frame - this.birth) * 1) / this.life);
    
                if (frame > this.birth + this.life){
                    for (let i = 0; i < circleArray.length; i++){
                        if (this.birth == circleArray[i].birth && this.life == circleArray[i].life){
                            circleArray.splice(i, 1);
                            break;
                        }
                    }
                } else{
                    this.draw();
                }
            }
    
        }
    
        var circleArray = [];
    
        function initCanvas() {
            circleArray = [];
        }
    
        var colorArray = [
            '355,85,80',
            '9,80,100',
            '343,81,45'
        ]
    
        function drawCircles(){
            for (let i = 0; i < 6; i++) {
                let radius = Math.floor(Math.random() * 4) + 2;
                let vx = (Math.random() * 2) - 1;
                let vy = (Math.random() * 2) - 1;
                let spawnFrame = frame;
                let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
                let life = 100;
                circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));
    
            }
        }
    
        var frame = 0;
        function animate() {
            requestAnimationFrame(animate);
            frame += 1;
            c.clearRect(0, 0, innerWidth, innerHeight);
            for (let i = 0; i < circleArray.length; i++ ){
                circleArray[i].update();
            }
    
        }
    
        initCanvas();
        animate();
    
        // This is just for demo purposes :
        for (let i = 1; i < 110; i++) {
            (function (index) {
                setTimeout(function () {
                    mouse.x = 100 + i * 10;
                    mouse.y = 100;
                    drawCircles();
                }, i * 10);
            })(i);
        }
    </script>
    
    
    </body></html>